<template>
    <div>
        <p>这是在setup语法糖中使用reactive的对象，当使用添加方法的时候这里会变化，因为是响应式的</p>
        {{ obj.name }} - {{ obj.age }}
    </div>
    <div>
        <button @click="add">（Ex9）点击我</button>
    </div>
    <div>
        <p>这是在setup语法糖中使用ref的对象，当使用添加方法的时候这里会变化，因为是响应式的</p>
        {{ money }}
    </div>
    <div>
        <button @click="addMoney">（Ex9）点击我</button>
    </div>
</template>

<script setup>
// 以后写vue3正常都会加setup语法糖。后面还可以写一个普通的<script>标签，然后在里面写其他vue的语法。
// setup 只能写一个 就算是在 <script>标签下面写setup函数都不行。
import { reactive, ref } from 'vue';

/**
 * setup语法糖
 *      1. setup函数是处于vue3.x Composition API 特性之一
 *      2. 它为组件提供了预先定义好的属性和方法
 *      3. setup函数是处于生命周期created()之前执行，此时vue对象还未创建，此时没有this
 *      4. setup函数接受两个参数：props和context（包括attrs,slots,emit）
 *      5. setup函数返回值：对象类型，该对象中的属性和方法可以直接在模板中使用
 * 
 * 使用方法：
 *      1. 在<script>标签中添加一个setup属性，它是一个函数,相当于是setup声明周期里面的函数。
 *      2. 如果直接在script标签中的顶级变量，不用return直接就可以在template里面使用。
 * 
 * setup函数注意点：
 * 
 */

//没有在函数中直接在script标签中定义的变量，顶级变量,可以在任何地方使用
const obj = reactive({
    name: 'omss',
    age: 18
})

//add就是顶级函数.函数声明或函数表达式
// function add() {
//     // 在这里，`this` 是什么？
//     console.log('常规函数中的 this:', this); 
//     // 在 <script setup> 中，`this` 是 undefined，因为 setup() 函数在创建组件实例之前执行。
//     // 但这不影响它访问响应式数据，因为它形成了闭包。
//     obj.age++
// }

// 箭头函数。
/**
 * 箭头函数的 this 是静态的，在定义时就确定了，永远不会改变。
 *     这使得它在回调函数场景下极其安全和可靠，你永远不用担心 this 指向丢失的问题。
 *     在 Vue 3 的 Composition API（特别是 <script setup>）中，由于我们主要依赖闭包来访问响应式数据，而不是 this，箭头函数的这种特性使其成为首选。
*/
const add = ()=> {
    // 箭头函数没有自己的 `this`，它会去寻找父作用域的 `this`。
    // <script setup> 本质上是 setup() 函数，它的 `this` 是 undefined。
    // 所以这里的 `this` 也是 undefined。
    console.log('箭头函数中的 this:', this); // undefined
    //同样，它通过闭包访问 `obj`，所以完全没问题。
    obj.age++
}

//在setup函数中，使用ref函数，创建一个响应式数据，可以在任何地方使用，包括不是setup的script标签中。
const money = ref(50)
const addMoney = () => {
    money.value += 10
}


</script>
<script>
export default {
    created() {
        console.log('setup函数中定义的变量---money:', this.money);  //undefined  不知道什么原因
    }
}

</script>


<style lang="">
    
</style>